リンクの文字色をランダムに変化させる
今回は、リンク文字の色をランダムに変化させるテクニックを紹介します。通常、リンク文字は青色(または指定した別の色)で表示されますが、今回のテクニックを使用すると、リンク文字の色を次々と変化させていくことが可能となります。文章中にリンクが点在する場合では、リンクを目立たせるといった効果も期待できますよ。試してみてください。  

→ リンクの色を変更する関数を呼び出す
 
まずは、リンク文字の色を変化させる関数を呼び出します。ページが表示されたと同時に関数が呼び出されるように、BODYタグにonLoadイベントを追加し、JavaScript関数を呼び出してください。なお、今回の例では「colorchange()」という名前でJavaScript関数を作成します。
<BODY bgcolor="#000000" text="#FFFFFF" onLoad="colorchange()">
 


→ リンクの色を変更する関数を作成する
 
続いて、JavaScript関数「colorchange()」を自作します。「Math.random()」は0〜1の乱数を発生させるメソッドで、これを(256×256×256)倍してから「Math.floor()」で整数することにより、フルカラーの色数に対応する変数「n」を作成しています。その後、変数「n」を「toString(16)」で16進数に変換し、「color」に代入します。あとは、「document.linkColor」「document.alinkColor」「document.vlinkColor」に「color」を指定するだけで、リンク文字の色をランダムに変更できます。
<SCRIPT language="JavaScript">
<!--
function colorchange(){
n=Math.floor(Math.random()*256*256*256)
color=n.toString(16);
document.linkColor=color;
document.alinkColor=color;
document.vlinkColor=color;
}
// -->
</SCRIPT>
 


→ setTimeoutで関数を繰り返し実行する
 
これまでの記述では、リンク文字の色が一回変更されるだけです。これを定期的に変化させるには、「setTimeout()」で関数「colorchange()」を繰り返し呼び出す必要があります。なお、繰り返しタイミングは1/1000秒単位で指定するため、1000を指定すると1秒おきに色が変化するようになります。
<SCRIPT language="JavaScript">
<!--
function colorchange(){
n=Math.floor(Math.random()*256*256*256)
color=n.toString(16);
document.linkColor=color;
document.alinkColor=color;
document.vlinkColor=color;
setTimeout('colorchange()',1000);
}
// -->
</SCRIPT>

サンプルページ


G|Cg|C@Amazon Yahoo yV

z[y[W yVoC[UNLIMIT1~] COiq COsI